<template>
	<view>
		<!-- initial-time 启始播放时间 s duration 指定视频时长 -->
		<view class="" style="position: fixed;width: 100%;height:600rpx;z-index: 999;">
			<video id="myVideo" :src="videoList.src" controls :initial-time='videoList.initial'
				style='width:100%;height:600rpx' @timeupdate='scheduleChanges' @ended='ended'></video>
		</view>
		<view style="position: relative;top: 600rpx;">
			<u-subsection activeColor="#FFBC00" :list="list" :current="curNow" mode="subsection" @change="sectionChange"
				fontSize='15'>
			</u-subsection>
			<view style='padding:15px' v-if='brief'>
				<view v-for="item in detailsData">
					<h3 style='text-align:center;margin:10px;'>{{item.lessonName}}</h3>
					<text class='course_brief'>科目分类</text><text class='course_brief_right'>{{item.subjectName}}</text>
					<text class='course_brief'>课程总课时</text><text
						class='course_brief_right'>{{item.videoTime?item.videoTime:0}}</text>
					<text class='course_brief'>课程总章节</text><text
						class='course_brief_right'>{{item.chapterQuantity}}</text>
					<text class='course_brief'>所属于班级</text><text class='course_brief_right'>{{item.className}}</text>
					<text class='course_brief'>课程简介</text><text
						class='course_brief_right'>{{item.courseIntroduce}}</text>
				</view>
			</view>
			<view v-else>
				<view class='course_catalogue' v-for="(key,index) in detailsData[0].chapters">
					<text class='course_catalogue_catalog'>{{key.chapterName}}</text>
					<view v-for="(every,index) in key.chapterItems">
						<text class="course_catalogue_trifle">第{{index+1}}节:{{every.chapterItemName}}</text>
						<view v-for="item in every.files">
							<u-line-progress style='width:65%;display:inline-block;margin:0 15px;'
								:percentage="item.videoTime==0?0:((every.alreadyTime/item.videoTime)*100)"
								:showText="false" activeColor="#ff0000" height='20'></u-line-progress>
							<text
								style="width:15%;display: inline-block;text-align: center;">{{parseInt(item.videoTime / 60)<=9?'0'+parseInt(item.videoTime / 60):parseInt(item.videoTime / 60)}}:{{parseInt(item.videoTime % 60)<=9?'0'+parseInt(item.videoTime % 60):parseInt(item.videoTime % 60)}}</text>
							<image class='_img' src="/static/study/play.png" mode="" @click="videoDisplay(every)">
							</image>
						</view>
					</view>
				</view>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	import {
		getStrByTime,
	} from '@/common/util.js'
	export default {
		components: {},
		data() {
			return {
				list: ['课程简介', '课程目录', ],
				curNow: 0,
				brief: true,
				options: {}, // 上个页面传的值
				detailsData: {},
				videoSrc: '',
				videoList: {
					src: "",
					initial: ""
				},
				videoData: '',
				iTime: "",
				videoContext: "",
				video_real_time: 0,
				nitial_time: '',
				isEqual: "", //是否切换视频，不提示快进
				videoId: "",
			}
		},
		onLoad(option) {
			this.options = option
			this.initial_time = '0' //视频进度
		},
		mounted() {
			this.search()
		},
		onReady() {
			this.videoContext = uni.createVideoContext('myVideo')
		},
		methods: {
			search() {
				this.$api.getDetails(this.options.lessonId).then(res => {
					this.detailsData = res.data.data
					if (this.detailsData.length) {
						// 课程详情 时间转换
						this.detailsData[0].videoTime = getStrByTime(this.detailsData[0].videoTime)
						// 默认视频
						this.videoList.src = this.detailsData[0].chapters[0]?.chapterItems[0]?.files[0].url

						// 默认数据
						this.videoData = this.detailsData[0].chapters[0]?.chapterItems[0]

						// 启示播放时间
						this.videoList.initial = this.detailsData[0].chapters[0]?.chapterItems[0].alreadyTime
					}
					// this.videoList.src =
					// 	'https://img.cdn.aliyun.dcloud.net.cn/guide/uniapp/%E7%AC%AC1%E8%AE%B2%EF%BC%88uni-app%E4%BA%A7%E5%93%81%E4%BB%8B%E7%BB%8D%EF%BC%89-%20DCloud%E5%AE%98%E6%96%B9%E8%A7%86%E9%A2%91%E6%95%99%E7%A8%8B@20200317.mp4'
					// console.log( res.data.data[0])
				})
			},
			// 视频报错
			// videoErrorCallback() {
			// 	this.$refs.uToast.show({
			// 		type: 'error',
			// 		message: "视频加载失败！",
			// 	})
			// },

			// 保存视频进度
			scheduleChanges(fullScreen) {
				var isReady = 1; // 是否开启可以视频快进 1 禁止开启
				//跳转到指定播放位置 initial-time 时间为秒
				let that = this;
				//播放的总时长
				var duration = this.videoData.files[0].videoTime;
				//实时播放进度 秒数
				var currentTime = parseInt(fullScreen.detail.currentTime);
				//当前视频进度
				// console.log("视频播放到第" + currentTime + "秒")//查看正在播放时间，以秒为单位
				if (that.video_real_time == 0) {
					var jump_time = parseInt(that.videoList.initial) + parseInt(that.video_real_time);
				} else {
					var jump_time = parseInt(that.video_real_time);
				}
				if (isReady == 1) {
					if ((currentTime > jump_time || currentTime < jump_time) && currentTime - jump_time > 3) {
						this.videoContext.seek(that.video_real_time);
						if (this.isEqual != 1) {
							uni.showToast({
								title: '未完整看完该视频，不能快进',
								icon: 'none'
							})
						}

					}
				}

				that.video_real_time = currentTime //实时播放进度

				this.isEqual = 3

				// || parseInt(fullScreen.detail.currentTime) !== this.videoData.files[0].videoTime
				if (parseInt(fullScreen.detail.currentTime) > this.videoData.alreadyTime) {
					if (this.videoData.alreadyTime !== this.videoData.files[0].videoTime) {
						var rep = /[.]/;
						if (!rep.test(parseInt(fullScreen.detail.currentTime) / 10)) {
							clearTimeout(this.iTime);
							this.iTime = setTimeout(function() {
								that.$api.saveStudy({
									classId: Number(that.options.classId), //班级id
									lessonId: Number(that.options.lessonId), //课程
									chapterId: that.videoData?.chapterId, //章节id
									chapterItemId: that.videoData?.id, //小节id
									id: that.videoId ? that.videoId : that.videoData?.studyRecord == -1 ?
										'' : that.videoData?.studyRecord, //学习记录id
									videoTime: that.videoData?.files[0].videoTime, //视频总时长
									alreadyTime: parseInt(fullScreen.detail.currentTime),
								}).then(res => {
									that.videoId = res.data.data;
									that.videoData.alreadyTime = parseInt(fullScreen.detail.currentTime);
								})
							}, 500);
						}
					}
				}
			},

			ended() {
				this.$api.saveStudy({
					classId: Number(this.options.classId), //班级id
					lessonId: Number(this.options.lessonId), //课程
					chapterId: this.videoData.chapterId, //章节id
					chapterItemId: this.videoData.id, //小节id
					id: this.videoData.studyRecord == -1 ? '' : this.videoData.studyRecord, //学习记录id
					videoTime: this.videoData.files[0].videoTime, //视频总时长
					alreadyTime: this.videoData.files[0].videoTime,
				});
				this.videoData.alreadyTime = this.videoData.files[0].videoTime;
			},

			// 点击播放视频
			videoDisplay(every) {
				if (every.files[0].url !== this.videoList.src) {
					this.isEqual = 1
				} else {
					this.isEqual = 2
				}
				// 替换视频
				this.videoList.src = every.files[0].url
				this.videoList.initial = every.alreadyTime
				this.videoContext.seek(every.alreadyTime)
				this.videoData = every
				this.videoContext.play()
				this.videoId = ''
				// console.log(31,every.alreadyTime)


			},

			// tab 切换
			sectionChange(index) {
				this.curNow = index;
				if (index == 0) {
					this.brief = true
				} else {
					this.brief = false
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	.course_brief {
		display: inline-block;
		width: 30%;
		margin: 8px;
		height: 100%;
		float: left;
		color: #333333
	}

	.course_brief_right {
		display: inline-block;
		width: 60%;
		margin: 8px 0;
		color: #333333
	}

	.course_catalogue {
		padding: 15px 15px 0 15px;

		.course_catalogue_catalog {
			font-size: 20px;
			display: block;
		}

		.course_catalogue_trifle {
			display: inline-block;
			font-size: 28rpx;
			margin: 0 15px
		}

		._img {
			width: 50rpx;
			height: 50rpx;
			margin: 0 0 0 10px;
			vertical-align: middle;
		}
	}
</style>